<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
  	store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
  	var src = './data.php'
  	
    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)

    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()
    console.log(xhr.readyState)
    xhr.abort()
    console.log(xhr.readyState)
    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
    }
  }
  </script>
</body>
</html>
  